<script setup>
import { ref } from 'vue'
import { randomStr } from '@/common'
import MessageItem from './MessageItem.vue'

const messageList = ref([
  {
    id: randomStr(),
    roleName: '旁白',
    avater: '',
    messageContent:
      '两个屌丝面对面，端起酒杯，心里盘算着吹什么牛逼比较好，吹牛逼这种事总是被很多人喜爱着，虽然这件事仔细一想听无聊的'
  },
  { id: randomStr(), roleName: '路人甲', avater: '', messageContent: '江湖不是打打杀杀' },
  { id: randomStr(), roleName: '路人乙', avater: '', messageContent: '那是什么' },
  { id: randomStr(), roleName: '路人甲', avater: '', messageContent: '是人情世故' },
  { id: randomStr(), roleName: '路人乙', avater: '', messageContent: '哦' },
  { id: randomStr(), roleName: '作者', avater: '', messageContent: '卡，太少了，多说点你们俩' }
])
</script>
<template>
  <div class="ai-chat">
    <!-- 对话列表 暂时省略 -->
    <div class="chat-list"></div>

    <div class="chat-detail">
      <!-- 顶部，群名称位置 -->
      <div class="action">
        <div class="session-name">武侠场景 1</div>
      </div>

      <!-- 内容区域 -->
      <div class="content">
        <!-- 对话相关 -->
        <div class="chating">
          <div class="message-list">
            <MessageItem v-for="item in messageList" :key="item.id" :data="item"></MessageItem>
          </div>
          <div class="message-input">
            <div class="meta-input">
              <div>
                <i class="iconfont icon-biaoqing"></i>
              </div>
            </div>
            <el-input :rows="2" type="textarea"></el-input>
            <div class="input-ope">
              <el-button type="primary">卡</el-button>
              <el-button type="primary">action</el-button>
            </div>
          </div>
        </div>

        <!-- 群信息，比如群成员 公告等位置 -->
        <div class="session-info"></div>
      </div>
    </div>
  </div>
</template>
<style lang="less" scoped>
.flex-align-left {
  display: flex;
  align-items: center;
  justify-content: flex-start;
}
.ai-chat {
  width: 100%;
  height: calc(100vh - 50px);
  display: flex;
  .chat-list {
    background-color: rgb(101, 79, 79);
    width: 200px;
  }
  .chat-detail {
    flex: 1;
    width: 100%;
    height: inherit;
    // display: flex;
    // flex-direction: column;
    @actionHeight: 40px;
    .action {
      .flex-align-left();
      background-color: #fff;
      border-bottom: 1px solid #dcdcdc;
      padding-left: 10px;
      height: @actionHeight;
    }

    .content {
      flex: 1;
      display: flex;
      height: calc(100% - @actionHeight);
      .chating {
        flex: 1;
        @inputHeight: 150px;
        .message-list {
          background-color: #fff;
          height: calc(100% - @inputHeight);
          overflow-y: scroll !important;
        }
        .message-input {
          border-top: 1px solid #dcdcdc;
          background-color: #fff;
          padding-bottom: 10px;
          height: @inputHeight;
          .meta-input {
            padding: 5px;
          }
          :deep(.el-textarea__inner) {
            box-shadow: unset !important;
          }
          .input-ope {
            padding-right: 10px;
            display: flex;
            align-items: center;
            justify-content: flex-end;
          }
        }
      }
      .session-info {
        width: 300px;
        background-color: skyblue;
      }
    }
  }
}
</style>
